<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Vue.js入门教程</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.7/vue.min.js" ></script>
    <!--<script type="application/javascript" src="../js/vue.js"></script>-->
    <!--style样式来源：oschina　更多评论页面-->
</head>
<body>
    <div id="app">
        <simple-counter></simple-counter>
        <simple-counter></simple-counter>
        <simple-counter></simple-counter>
    </div>
</body>
    <script>
        var data={
            counter:0
        }
        Vue.component('simple-counter',{
            template:'<button v-on:click="counter+1">{{counter}}</button>',
            //data是一个函数，因此Vue不会警告，
            //但是我们为每一个组件返回了同一个对象应用
            data:function(){
                return data
            }
        })
        var app=new Vue({
            el:'#app'
        })
    </script>
</html>
